<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!--列表-->
        <el-table :data="listData" border style="width: 100%;margin-top:20px;">
            <el-table-column prop="Name" label="账号" />
            <el-table-column prop="Password" label="密码" />
            <el-table-column prop="Phone" label="手机号" />
            <el-table-column align="center" fixed="right" label="操作" prop="rateValue">
                <template #default="scope">
                    <el-button type="text" @click="editClick(scope.row)">修改密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
        <!-- 编辑界面 -->
        <el-dialog title="修改密码" :visible.sync="editDialog" destroy-on-close>
            <el-form ref="editForm" :model="editForm" label-width="120px" :rules="rules">
                <el-form-item label="账号：" prop="Name">
                    <el-input v-model="editForm.Name" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="Password">
                    <el-input v-model="editForm.Password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="checkPass">
                    <el-input type="password" v-model="editForm.checkPass" autocomplete="off" placeholder="请重新输入密码"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="Phone">
                    <el-input v-model="editForm.Phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="EdithandleNo('editForm')">取 消</el-button>
                    <el-button type="primary" @click="EdithandleOk('editForm')">确 定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
import Pagination from '../../components/Pagination'
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.editForm.Password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '添加',
            editDialog: false,
            formInline: {
                page: 1,
                limit: 10,
                Code: "",
                TypeName: "",
                Status: "",
                createStartTimer: '',
                createEndTimer: '',
            },
            // rules表单验证
            rules: {
                Name: [
                    { required: true, message: '请输入账号', trigger: ['blur', 'change'] }
                ],
                Password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }],
                Phone: [{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: ['blur', 'change'] }],
                checkPass: [
                    { validator: validatePass, trigger: ['blur', 'change'] }
                ],

            },
            CategoryOptions: [
                {
                    name: '状态1',
                    id: '1'
                },
                {
                    name: '状态2',
                    id: '2'
                },
                {
                    name: '状态3',
                    id: '3'
                },
                {
                    name: '状态4',
                    id: '4'
                },
                {
                    name: '状态5',
                    id: '5'
                },
            ],
            timer: null,
            editForm: {},
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            }
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    watch: {
        timer(nVal) {
            console.log(nVal, 'nVal')
            if (nVal) {
                this.formInline.createStartTimer = nVal[0]
                this.formInline.createEndTimer = nVal[1]
            } else {
                delete this.formInline.createStartTimer
                delete this.formInline.createEndTimer
            }
        },
    },
    created() {
        this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
        // 获取公司列表
        getdata() {
            this.loading = true
            // 模拟数据开始
            let res = {
                code: 0,
                msg: null,
                count: 5,
                data: [
                    {
                        Name: 'admin',
                        Password: "admin123",
                        Phone: "18734770909",
                    },
                    {
                        Name: 'sys',
                        Password: "123",
                        Phone: "18734770707",
                    },
                ]
            }
            this.loading = false
            this.listData = res.data
            this.pageparm.currentPage = this.formInline.page
            this.pageparm.pageSize = this.formInline.limit
            this.pageparm.total = res.count
        },
        // 编辑弹框
        editClick(e) {
            this.type = 2
            console.log(e, 'e')
            this.editForm = e
            this.editForm.Password = ''
            this.editDialog = true
        },
        // 编辑保存
        EdithandleOk(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.editDialog = false
                    this.getdata()
                    this.$message.success('修改成功！')
                } else {
                    return false;
                }
            });

        },
        // 编辑取消
        EdithandleNo(formName) {
            this.$refs[formName].resetFields();
            this.editDialog = false
            this.getdata()
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getdata(this.formInline)
        },
        // 搜索事件
        search() {
            console.log(this.formInline, 'this.formInline')
            // this.getdata(this.formInline)
        },
        // 重置
        reset() {
            this.formInline.deptName = ''
            this.formInline.deptNo = ''
        },
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}

.add {
    margin: 10PX 0;
}
</style>